<!-- 
  uniapp 总结
  day1
  1. 怎么创建一个 uniapp 的项目
    1.1 HbuildX 新建 - 项目
    1.2 ✨✨vue-cli 脚手架创建(如果执需要创建小程序的项目)
      1. node版本16，然后安装全局vue/cli@4.5.19,千万不要用第5版
      2. 脚手架创建项目，vue create -p dcloudio/uni-preset-vue my-project
      3. 如果是首次创建，选择"默认模板即可"
  2. 运行和预览 项目
    1. 在 manifest.json填入appid
    2. 运行 npm run dev:mp-weixin（开发中一定要保证是在运行的）
    3. 开发者工具，导入项目，注意路径 "项目地址/dist/dev/mp-weixin"
  3. uniapp 开发规范
    1. 标签和应用、页面生命周期，使用小程序规范(view,text,onLoad,onShow)  
    2. 语法和组件的生命周期，使用vue2的语法规范(@click, mounted)
    3. 不要在微信开发者工具中，做任何的修改(包括页面的创建app.json,修改appid) 
    
  4. uniapp 的 api
    1. 大部分都是把 wx 改为 uni 即可： 
        wx.showToast() ---- uni.showToast()
        wx.request() ---- uni.request()
    2. 使用promise返回的是数组，建议直接解构使用即可
        const [err, res] = await uni.login();
  5. easycom 语法
    1. 按照规范新建组件： components/组件名/组件名.vue
    2. 页面直接使用即可

  6. 引入和使用 uni-ui，按照官网即可
    https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#npm%E5%AE%89%E8%A3%85

  day2
  1. 项目准备 - 为@添加代码提示和插件
  jsconfig.json 文件中
    "compilerOptions": {
      "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"],
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
    }
  },
  2. vuex 持久化插件
  import persistence from 'vuex-uniapp-persistence';
  const store = new Vuex.Store({
    // 引进和开启，注意属性和state同级
    plugins: [persistence()],
  }

  3. 自定义导航栏
    1. 需要在 pages.json 开启自定义属性
      {
        "path": "pages/index/index",
        "style": {
          "navigationStyle": "custom",  ✨✨✨看这里
          "navigationBarTextStyle": "white"
        }
      },
  4. 安全区域 - uni.getWindowInfo().safeArea
  可以通过 uni.getWindowInfo().safeArea.top 拿到安全区域的起点
  5. 胶囊区域 - uni.getMenuButtonBoundingClientRect()
  可以通过 uni.getMenuButtonBoundingClientRect().top 拿到胶囊区域的起点


  scroll-view 滚动组件
  scroll-y 开启竖直方向滚动
  scroll-x 开启水平方向滚动
  @scrolltolower 滚动到底部的事件
  refresher-enabled 开启下拉刷新
  @refresherrefresh 下拉刷新事件
  refresher-triggered 下拉刷新的状态控制

  分页：
  1. 找到组件 scroll-view 滑到底部的api，触发方法 - @scrolltolower
  2. 在方法里，检查是否还有下一页的数据 - 当前页数 < 后台告知的总页数
    1. 有的话，页码加1，page++，发送请求
    2. 数据回来，要追加
    3. 优化- 添加节流，用户反馈

    day3-day4
    /*
    用户角度 - 点击"快捷登录"按钮，完成登录
    开发者角度
        1. 进入登录页面，调用 wx.login,拿到用户的微信号
        2. 点击"快捷登录"按钮，拿到用户的手机号
        3. 发送登录请求，拿回来用户数据，完成登录
     */
 -->

<script>
export default {};
</script>

<style lang="scss">
@import './static/fonts.scss';
view,
navigator,
input,
scroll-view {
  box-sizing: border-box;
}
button {
  &::after {
    border: none;
  }
}
swiper,
scroll-view {
  flex: 1;
  height: 100%;
  overflow: hidden;
}
image {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 加载提示 */
.loading {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding-bottom: 16rpx;
}
.popup-root {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  view {
    height: auto;
    padding: 0;
  }
  .title {
    line-height: 1;
    padding: 40rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: normal;
    border-bottom: 1rpx solid #ddd;
    color: #444;
  }
  .close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;
    .button {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin: 0 20rpx;
      color: #fff;
      border-radius: 72rpx;
    }
    .primary {
      color: #fff;
      background-color: #27ba9b;
    }
    .secondary {
      background-color: #ffa868;
    }
  }
}
</style>
